import { useState, useEffect } from 'react';
import DateSelector from './components/DateSelector';
import LunarInfo from './components/LunarInfo';
import { fetchLunarData } from './utils/api';
import './App.css';

function App() {
    const [date, setDate] = useState(new Date());
    const [lunarData, setLunarData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const getLunarData = async () => {
            setLoading(true);
            setError(null);
            try {
                const data = await fetchLunarData(date);
                setLunarData(data);
            } catch (err) {
                setError(err.message || '获取数据失败');
                console.error('获取农历数据失败:', err);
            } finally {
                setLoading(false);
            }
        };

        getLunarData();
    }, [date]);

    return (
        <div className="app">
            <header>
                <h1>农历查询</h1>
            </header>
            <main>
                <DateSelector selectedDate={date} onDateChange={setDate} />

                {loading && <div className="loading">加载中...</div>}
                {error && <div className="error">{error}</div>}
                {!loading && !error && lunarData && <LunarInfo data={lunarData} />}
            </main>
        </div>
    );
}

export default App; 